import 'package:flutter/material.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

class ColorList extends StatefulWidget {
  String title = '';
  int selectIndex = 100;
  List<int> colorList = [];
  Function(List<int>, int) onChanged;
  final _ColorListState _state = _ColorListState();
  ColorList(
      {super.key, required this.title, required this.selectIndex, required this.colorList, required this.onChanged});

  @override
  State<ColorList> createState() => _state;
}

class _ColorListState extends State<ColorList> {
  bool get showContent {
    return widget.title == 'STANDARD';
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
      return Container(
          color: Colors.transparent,
          child: Column(
            children: [
              Flexible(flex: 1, child: Text(widget.title, style: const TextStyle(fontSize: 20, color: Colors.white))),
              const SizedBox(height: 10),
              Expanded(
                flex: 3,
                child: GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  padding: const EdgeInsets.only(top: 0, bottom: 0, left: 0, right: 0),
                  itemCount: widget.colorList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: widget.colorList.length,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    childAspectRatio: 1,
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      decoration: BoxDecoration(
                          color: Color(widget.colorList[index]),
                          borderRadius: BorderRadius.circular(4),
                          border: widget.selectIndex == index ? Border.all(color: Colors.white, width: 1.5) : null),
                      clipBehavior: Clip.hardEdge,
                      child: InkWell(
                        onTap: () {
                          setState(() => widget.selectIndex = index);
                          var list = widget.colorList[index].bytes;
                          list.removeAt(0);
                          widget.onChanged(list, index);
                        },
                        child: showContent && index == 0
                            ? const Center(
                                child: Text('RGB',
                                    style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.w500)),
                              )
                            : null,
                      ),
                    );
                  },
                ),
              ),
            ],
          ));
    });
  }
}
